<template>
  <nly-content-wrapper>
    <div class="a-base-container">
      <div class="slide-menu">
        <div class="title">项目</div>
        <a-menu :default-selected-keys="[key]">
          <a-menu-item v-for="(item,i) in menu" :key="item.key||i" @click="toNext(item)">
            <span>{{item.label}}</span>
          </a-menu-item>
        </a-menu>
      </div>
      <div class="view">
        <!-- <keep-alive> -->
        <component :is="key"></component>
        <!-- </keep-alive> -->
      </div>
    </div>
  </nly-content-wrapper>
</template>
 
<script>
export default {
  components: {
    enabled: () => import("./enabled"),
    accountingPeriod: () => import("./accountingPeriod"),
    encodingRules: () => import("./encodingRules"),
    dataAccuracy: () => import("./dataAccuracy"),
    accountantCourse: () => import("./accountantCourse"),
    maintenance: () => import("./maintenance"),
    bankAccount: () => import("./bankAccount"),
    clearMethod: () => import("./clearMethod"),
    balance: () => import("./balance"),
    foreignCurrency: () => import("./foreignCurrency")
  },
  name: "setting",
  data() {
    return {
      key: "enabled",
      menu: [
        { label: "系统启用", key: "enabled" },
        { label: "会计期间", key: "accountingPeriod" },
        { label: "编码规则", key: "encodingRules" },
        { label: "数据精度", key: "dataAccuracy" },
        { label: "外币设置", key: "foreignCurrency" },
        { label: "会计科目", key: "accountantCourse" },
        { label: "凭证类别", key: "" },
        { label: "项目维护", key: "maintenance" },
        { label: "银行账户", key: "bankAccount" },
        { label: "结算方式", key: "clearMethod" },
        { label: "期初余额", key: "balance" },
        { label: "凭证定义", key: "" }
      ]
    };
  },
  methods: {
    toNext(item) {
      if (item.key) {
        this.key = item.key;
      } else {
        this.$message.warning("未开发");
      }
    }
  }
};
</script>
 
<style lang="scss" scoped>
::v-deep {
  .ant-menu-vertical {
    border: 0px;
  }
}

.slide-menu {
  width: 250px;
  text-align: center;
  height: 100%;
  border-right: 1px solid #cacaca;
}

.view {
  width: calc(100% - 250px);
  height: 100%;
  padding: 10px;
}
</style>